<template>
  <div class="container">
    <Breadcrumb
      :items="['menu.tenant-management', 'menu.tenant-management.new']"
    />
    <a-spin :loading="loading" style="width: 100%">
      <a-card>
        <template #title>
          {{ $t('menu.tenant-management.new') }}
        </template>
        <div class="wrapper">
          <a-steps
            v-model:current="step"
            style="width: 580px"
            line-less
            class="steps"
          >
            <a-step :description="$t('stepForm.step.subTitle.baseInfo')">
              {{ $t('stepForm.step.title.baseInfo') }}
            </a-step>
            <a-step :description="$t('stepForm.step.subTitle.channel')">
              {{ $t('stepForm.step.title.channel') }}
            </a-step>
            <a-step :description="$t('stepForm.step.subTitle.finish')">
              {{ $t('stepForm.step.title.finish') }}
            </a-step>
          </a-steps>
        </div>
      </a-card>
    </a-spin>
  </div>
</template>

<script lang="ts" setup></script>

<style lang="less" scoped>
  .container {
    // display: flex;
    // height: 100vh;
    padding: 0 20px 20px 20px;

    .content {
      position: relative;
      display: flex;
      flex: 1;
      align-items: center;
      justify-content: center;
      padding-bottom: 40px;
    }

    .footer {
      position: absolute;
      right: 0;
      bottom: 0;
      width: 100%;
    }
  }
</style>

<style lang="less" scoped>
  // .container {
  //   padding: 0 20px 20px 20px;
  // }
  // :deep(.arco-table-th) {
  //   &:last-child {
  //     .arco-table-th-item-title {
  //       margin-left: 16px;
  //     }
  //   }
  // }
  // responsive
  @media (max-width: @screen-lg) {
    .container {
      .banner {
        width: 25%;
      }
    }
  }
</style>
